<template>
  <div class="user-profile">
    <van-nav-bar
      class="app-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <input 
        type="file"
        hidden
        ref="file"
        accept="image/*"
        @change="onFileChange"
    >
    <van-cell title="头像" is-link center @click="$refs.file.click()">
        <van-image
            width="30"
            height="30"
            round
            fit="cover"
            :src="user.photo"
        />
    </van-cell>
    <van-cell 
        title="呢称" 
        is-link 
        :value="user.name"
        @click="isEditNameShow = true"
    />
    <van-cell 
        title="性别" 
        is-link 
        :value="user.gender === 1 ? '女' : '男'"
        @click="isEditGenderShow = true"
    />
    <van-cell 
        title="生日" 
        is-link 
        :value="user.birthday"
        @click="isEditBirthdayShow = true"
    />

    <!-- 编辑呢称 -->
    <van-popup 
        v-model="isEditNameShow" 
        position="bottom" 
        :style="{ height: '100%' }" 
    >
        <!-- 
            v-model="user.name" 相当于下面
            :value="user.name"
            @input="user.name = $event"
            v-model 的本质还是父子组件的通信，简化了父组件的使用
         -->
         <!-- v-model 只能使用一次 -->
         <!-- 
             如果有多个数据需要保持同步，使用 .sync 修饰符
             :gender.sync = "user.gender" 相当于
                :gender = "user.gender"
                @update:gender = "user.gender = $event"
                @update:属性名称 = "user.gender = $event"

                我们一般把最常用的数据设计为 v-model 绑定，
                把不常用的数据设计为 .sync

                参考文档：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
          -->
        <update-name
            v-if="isEditNameShow"
            v-model="user.name"
            @close="isEditNameShow = false"
        />
    </van-popup>

    <!-- 编辑性别 -->
    <van-popup 
        v-model="isEditGenderShow" 
        position="bottom" 
    >
        <update-gender
            v-if="isEditGenderShow"
            v-model="user.gender" 
            @close="isEditGenderShow = false"
        />
    </van-popup>

    <!-- 编辑生日 -->
    <van-popup 
        v-model="isEditBirthdayShow" 
        position="bottom" 
    >
        <update-birthday 
            v-if="isEditBirthdayShow"
            v-model="user.birthday"
            @close="isEditBirthdayShow = false"
        />
    </van-popup>

    <!-- 编辑头像 -->
    <van-popup 
        class="update-photo-popup"
        v-model="isEditPhotoShow" 
        position="bottom" 
        :style="{ height: '100%' }" 
    >
        <update-photo 
            v-if="isEditPhotoShow"
            :file="previewImage"
            @close="isEditPhotoShow = false"
            @update-photo="user.photo = $event"
        />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
import UpdatePhoto from './components/update-photo'

export default {
  name: 'UserProfile',
  components: {
      UpdateName,
      UpdateGender,
      UpdateBirthday,
      UpdatePhoto
    },
  props: {},
  data() {
    return {
        user: {}, // 用户个人资料
        isEditNameShow: false, // 编辑呢称的显示状态
        isEditGenderShow: false, // 编辑性别的显示状态
        isEditBirthdayShow: false, // 编辑生日的显示状态
        isEditPhotoShow: false,  // 编辑头像的显示状态
        previewImage: null // 保存预览图片
    };
  },
  computed: {},
  watch: {},
  created() {
      this.loadUserProfile()
  },
  mounted() {},
  methods: {
      async loadUserProfile() {
          const { data } = await getUserProfile()
          this.user = data.data
      },

      onFileChange() {      
        //   const file = window.URL.createObjectURL(this.$refs.file.files[0])
          const file = this.$refs.file.files[0]
          this.previewImage = file

          // 显示弹出层
          this.isEditPhotoShow = true
          // 为了防止选相同文件不触发 change 事件，所以在这里手动的清空 file 的 value
          this.$refs.file.value = ''
        
      }
  }
};
</script>
<style lang="less" scoped>
.van-popup {
    background-color: #f5f6f7;
}
.update-photo-popup {
    background-color: #000;
}
</style>